<template>
    <el-card>
        <div>
            <div v-for="p in state" :key="p.id">
                <div class="all">
                    <el-checkbox v-model="p.isCheckAll" :indeterminate="p.isIndeterminate"
                        @change="checkAllChange(p)">{{ p.name }}</el-checkbox>
                </div>
                <el-checkbox-group v-model="p.checkeds" @change="gourpChange(p)">
                    <el-checkbox v-for="c in p.children" :key="c.id" :label="c.id">{{ c.name }}</el-checkbox>
                </el-checkbox-group>
            </div>
            <div class="flex">
                <el-button type="primary" @click="clickHandle">保存</el-button>
                <el-button @click="empty">清空</el-button>
            </div>
        </div>
    </el-card>
</template>
<script setup lang='ts'>
import { ref } from "vue"
import { ElMessageBox, ElMessage } from "element-plus";
import { getRourceListByRoleIdApi, resourceListAllApi, resourceCategoryListAllApi, allocResourceApi } from './api';
import { useRoute } from "vue-router"
const route = useRoute()
type IState = IResourceCategoryModel & {
    children: IResourceModel[];
    checkeds: number[];
    isCheckAll: boolean;
    isIndeterminate: boolean;
};

let state = ref<IState[]>([]);
Promise.all([resourceCategoryListAllApi(), resourceListAllApi(), getRourceListByRoleIdApi(parseInt(route.query.id as string))])
    .then((res) => {
        state.value = res[0].data.map(item => ({
            ...item,
            children: [],
            checkeds: [],
            isCheckAll: false,
            isIndeterminate: false,
        }));
        res[1].data.forEach((resource) => {
            const cate = state.value.find((cate) => cate.id === resource.categoryId);
            cate && cate.children.push(resource)
        });
        res[2].data.forEach((item) => {
            const pp = state.value.find((p) => p.id === item.categoryId);
            pp && pp.checkeds.push(item.id)
        });
        state.value.forEach((pp) => {
            pp.isCheckAll = pp.checkeds.length === pp.children.length;
            pp.isIndeterminate = pp.checkeds.length > 0 && pp.checkeds.length < pp.children.length
        })
    })
    .catch(() => { });

const checkAllChange = (data: IState) => {
    if (!data.isCheckAll) {
        data.checkeds = []
    } else {
        data.checkeds = data.children.map((item) => item.id)
    }
    data.isCheckAll = data.checkeds.length === data.children.length
    data.isIndeterminate = data.checkeds.length > 0 && data.checkeds.length < data.children.length
}
const gourpChange = (data: IState) => {
    data.isCheckAll = data.checkeds.length === data.children.length
    data.isIndeterminate = data.checkeds.length > 0 && data.checkeds.length < data.children.length
}

const clickHandle = () => {
    ElMessageBox.confirm("确定要修改当前用户的资源吗？", "分配用户资源", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            allocResourceApi({
                roleId: parseInt(route.query.id as string),
                resourceIds: state.value.reduce<number[]>((prev, next) => {
                    return prev.concat(next.checkeds);
                }, []),
            }).then((res) => {
                if (res.code === 200) {
                    ElMessage.success("修改成功");
                }
            });
        })
        .catch(() => { });

};

const empty = (data: IState)=>{
    data.isCheckAll =false;
}
</script>
<style lang="less" scoped>
.all {
    padding: 20px;
    background-color: #f2f6fc;
}

:deep(.el-checkbox-group) {
    display: grid;
    grid-template-columns: repeat(3, 33%);
    padding: 20px;
}

.flex {
    padding: 20px;
    display: flex;
    justify-content: center;
}
</style>